<template>
<div id="app">
    <div class="left">
        <div class="left-wrap">
            <p v-for="(item,index) in arr" :key="index" @click="changeIndex(index)" :class="{'active':index==activeIndex}">{{item.title}}</p>
        </div>
    </div>
    <div class="right">
        <div class="ul" ref="ul">
            <li v-for="(item,index) in arr" :key="index">
                 <div v-for="(ite,ind) in item.children" :key="ind">
                     <h3>{{ite.title}}</h3>
                     <div  class="box">
                            <div v-for="(it,i) in ite.children" :key="i" class="boxsmall">
                         <dl>
                             <dt>
                                 <img v-lazy="it.img" alt="">
                             </dt>
                             <dd>{{it.name}}</dd>
                         </dl>
                     </div>
                     </div>
                  
                 </div>
            </li>
        </div>
    </div>
</div>
</template>


<script>
import Vue from 'vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload);
import axios from "axios"
import BScroll from "better-scroll"
   export default {
      data(){
          return {
              arr:[],
              leftS:null,
              rightS:null,
              activeIndex:0
          }
      },
      mounted() {
          var that = this
          axios.get("/list").then(res=>{
              console.log(res.data);
              this.arr = res.data
              // 如果要操作dom但是不生效，就加nextTick
                this.$nextTick(()=>{
                    // 让左侧滚动
                        this.leftS = new BScroll(".left",{
                        scrollY:true,
                        click:true
                    })
                    // 让右侧进行滚动
                    this.rightS = new BScroll(".right",{
                        scrollY:true,
                        probeType: 3, //派发滚动
                    })
                    //监听右侧滚动事件
                    this.rightS.on("scroll",(e)=>{
                         console.log(e)
                        let newArr = [...that.$refs.ul.children]
                         newArr.forEach((item,index)=>{
                             if (-e.y > item.offsetTop) {
                                 that.activeIndex = index
                             }
                         })

                    })
                 })
            
          })
      },
      methods:{
          changeIndex(index) {
              this.activeIndex = index
              // betterScroll的实例.scrollToElement(子元素)
              this.rightS.scrollToElement(this.$refs.ul.children[index],1000)
          }
      }
   }
</script>



<style lang="scss">
// app.vue里style标签不能加scoped
* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
html,body {
    width: 100%;
    height: 100%;
}
#app {
  width: 100%;
  height: 100%;
  display: flex;
  .left {
      width: 90px;
      background: pink;
      overflow: hidden;
      p {
          height: 40px;
      }
  }
  .right {
      flex: 1;
      overflow: hidden;
  }
}
h3 {
    background: #666;
}
.box {
    display: flex;
    flex-wrap:wrap;

}
.boxsmall {
    width: 33%;
    display: flex;
    justify-content: space-around;
}
.active {
    background: blue;
}
</style>
